<template>
	<view class="page">
		<template v-if="token&&isLogin">
			<view class="h45 m-b2">
				<view class="fix-wrap search-tool">
					<view class="search-tool-form">
						<view class="iconfont">&#xe663;</view>
						<input type="text" confirm-type="search" class="key-inp" placeholder="输入设备名称"
							@confirm="setKeyword" />
					</view>
				</view>
			</view>
			<view class="body">
				<template v-if="!loadingState.default">
					<template v-if="list.data.length>0">
						<view class="tool-list-wrap">
							<view v-for="(item,index) in list.data" :key="index" class="item"
								@click="select_dev(item.cameraUuid,item.cameraName)">{{item.cameraName}}</view>
						</view>
						<loading :loadingState="loadingState"></loading>
					</template>
					<empty v-else>
						<view slot="msg">没有这台设备</view>
					</empty>
				</template>
				<template v-else>
					<loading :loadingState="loadingState"></loading>
				</template>

			</view>
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import empty from '@/components/empty.vue'
	import {
		getCurrenPage
	} from '@/common/util.js'
	export default {
		name: 'name',
		data() {
			return {
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				userInfo: uni.getStorageSync('userInfo'),
				isLogin: false,
				dev_type: '',
				params: {
					limit: 20,
					page: 1,
					keywork: '',
				},
				list: {
					data: []
				},
				loginStateUpdate: false,
				loadingState: {
					default: true,
					loading: false,
					completed: false
				},
				city:{
					adcode:'',
				},
				 
			}
		},
		async onLoad(params) {
			console.log(params)
			this.dev_type = params.dev_type;
			
			if(this.token){
				this.isLogin=await this.$loginState('check');  
				if(this.isLogin){ 
					this.getDeviceList();
				}else{
					this.isLogin=await this.$loginState('reset');
				}
			} 
		},
		async onShow() {
			if(this.loginStateUpdate){
				this.token=uni.getStorageSync('token');
				this.userInfo=uni.getStorageSync('userInfo'); 
				this.isLogin=true;
				this.getDeviceList();
				this.loginStateUpdate=false;
			}	
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}
			 
		},
		onReachBottom() {
			if (this.loadingState.completed) {
				this.params.page = 0;
				return false
			} else {
				this.params.page++;
				this.getDeviceList();
			}
		},
		methods: {

			dataInit: function() {
				this.list.data = [];
				this.params.page = 1;
				this.loadingState.default = true;
				this.loadingState.loading = false;
				this.loadingState.completed = false;
			},
			
			// 获取设备列表
			getDeviceList: async function() {
				let res = await this.$api.tool_api.getCameraDev()
				console.log(res)
				if (res.data.ret == 1000) {
					this.list.data = this.list.data.concat(res.data.data);
					if (res.data.data.length < this.params.limit) {
						this.loadingState.default = false;
						this.loadingState.loading = false;
						this.loadingState.completed = true;
					} else {
						this.loadingState.default = false;
						this.loadingState.loading = true;
					}
				} else if (res.data.ret == 1002) {
					this.loadingState.default = false;
					this.loadingState.loading = false;
					this.loadingState.completed = true;
				}
			},
 
			setKeyword: function(e) {
				this.params.keywork = e.detail.value;
				this.dataInit();
				this.getDeviceList();
			},
			 

			select_dev: function(id, name) { 
				console.log(id,name)
				let prevPage = getCurrenPage(2);
				prevPage.$vm.select_dev.id = id;
				prevPage.$vm.select_dev.name = name;
				prevPage.$vm.select_dev.update=true; 
				uni.navigateBack({
					delta: 1
				})
			}
		},
		components: {
			empty,
			loading
		},
		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.search-tool-form {
		margin: 7px 10px;
		height: 30px;
		border: 2rpx solid #ddd;
		background: #f2f2f2;
		border-radius: 38rpx;
		display: flex;
		flex-grow: 2;

		.iconfont {
			width: 60rpx;
			text-align: center;
			line-height: 60rpx;
			color: #999;
			font-size: 44rpx;
		}

		.key-inp {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #666;
			flex-grow: 2;
		}
	}

	.tool-list-wrap {
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		background: #fff;

		.item {
			line-height: 90rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 28rpx;
			color: #333;
		}
	}
</style>
